<template>
	<view class="homestay">
		<view class="hotelHeader">
			<view class="hearder-content">
				<view class="header-left">
					<view class="hleft">
						微山湖
					</view>
					<view class="hright" @click="showTimePopup">
						<view>
							<text class="zhu">住</text>{{startTime1}}
						</view>
						<view>
							<text class="zhu">离</text>{{endTime1}}
						</view>

					</view>
				</view>
				<view class="timePop">
					<fui-bottom-popup :show="popupShow" @close="closeTimePopup">
						<view class="timeHeader">
							请选择日期
							<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="closeTimePopup"></image>
						</view>
						<view class="fui-custom__wrap">
							<fui-calendar type="3" showLunar @change="calendarChange" activeBackground='#35743D'></fui-calendar>
						</view>
						<fui-button text="完成" background="#35743D" width='96%' height="72rpx" :margin="['10', '17rpx']" radius='50rpx'
						 @click="closeTimePopup"></fui-button>
					</fui-bottom-popup>
				</view>
				<view class="header-right">
					<view class="hed-img">
						<image :src="baseOssUrl+'icon/fdajing.png' " mode=""></image>
					</view>
					<input type="text" v-model="inpTitle" @confirm='goEnter' placeholder="输入关键字/景点/位置等" />

				</view>
			</view>
			<view class="hearder-screen">
				<fui-filter-bar :items="filterItems" @change="filterChange" activeColor="#a31b03"></fui-filter-bar>
			</view>
		</view>

		<view class="hotelContent padding25" v-if="hoteldList.length !==0">
			<view class="hotel-details " v-for="(hotelItem,index) in hoteldList" :key='index' @click="gostayDetails(hotelItem.id)">
				<!--  :hotelList='hotelList' -->
				<view full class="card-content">
					<image class="stay-img" :src="baseOssUrl2 + hotelItem.headPhoto " mode=""></image>
					<view class="padding25">
						<view class="fui-card__content fui-padding">{{hotelItem.title}}</view>
						<view class="fui-card__details">
							{{hotelItem.deposit || ''}}｜{{hotelItem.deskService || ''}}｜{{hotelItem.wifi || ''}}｜{{hotelItem.parkingLot || ''}}
						</view>
						<view class="pn5">距您直线{{distance(latitude,longitude,hotelItem.latitude,hotelItem.longitude)}}公里</view>
						<view class="fui-card__price">
							<text class="card-pr1" v-if="hotelItem.jgMin&&hotelItem.hdJgMin">￥{{(item.jgMin)>(item.hdJgMin)? item.hdJgMin:item.jgMin }}</text>
							<text class="card-pr1" v-else>¥{{hotelItem.jgMin}}</text>
							<!-- <text class="card-pr2">¥499</text> -->
							<!-- <image :src="baseOssUrl + 'icon/zhixiang.png' " mode=""></image> -->
						</view>
					</view>
				</view>
			</view>
				<fui-divider v-if="bottomShowText" text="没有更多了"></fui-divider>
		</view>
		<view class="hotelContent padding25" v-else>
			暂无数据
		</view>
		<fui-top-popup :show="show" @close="closePopup" class="headTop">
			<view class="fItems">
				<view v-show="topModel == 0">
					<view class="fItem0">
						<view class="fui-custom__wrap price-custom__wrap">
							<view class="price-rang">
								￥0
								<view class="">
									￥300以上
								</view>
							</view>
							<fui-slider class='progress-style' width='280' background='#35743D' activeColor='#B4B4B4' section showValue
							 @change="sectionChange" :value='minNum' :endValue='maxNum' :max='300' :step='50'></fui-slider>

							<view class="price-introduce">
								<view class="price-items" @click="getRang(item)" v-for="item in priceRang" :class="{'active-rang' :item.id == isRang }">
									{{item.name}}
								</view>

							</view>
						</view>
						<view class="finish-btn">
							<fui-button text="完成" background="#35743D" width='96%' height="73rpx" :margin="['0', '17rpx']" radius='46rpx'
							 @click="pricePopup"></fui-button>
						</view>
					</view>
				</view>
				<view v-show="topModel == 1">
				</view>
			</view>
		</fui-top-popup>
		<fui-top-popup :show="showAddress" @close="addreClosePopup" class="headTop">
			<view class="fItems">
				<view v-show="topModel == 2" style="height: 100px;display: flex;">
					<text style="width: 35%;">我的附近</text>
					<fui-data-tag mark :options="categoryOp" activeColor='#35743D' markColor='#35743D' borderColor='#35743D' @change="categoryChange"></fui-data-tag>
				</view>
			</view>
		</fui-top-popup>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import category from '@/components/component/qiyue-category.vue';
	// import hotelLists from '@/components/component/hotelList.vue'
	export default {
		components: {
			category,
			// hotelLists
		},
		data() {
			return {
				show: false,
				topModel: '',
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				picFlag: true,
				pnItems: ['免费停车', '免费早餐'],
				hoteldList: [],
				filterItems: [{
						text: '价格',
						value: '',
						type: 'dropdown',
						active: false
					},
					// {
					// 	text: '人数',
					// 	value: '',
					// 	type: 'dropdown',
					// 	active: false
					// }, 
					// {
					// 	text: '好评',
					// 	type: 'dropdown',
					// 	value: '',
					// 	active: false
					// },
					{
						text: '距离',
						value: '',
						type: 'dropdown',
						active: false
					}
				],
				filterINdex: 1,
				// pepoleList: [{
				// 	peoplo: '成人',
				// 	age: '2-12岁'
				// }, {
				// 	peoplo: '儿童',
				// 	age: '2岁'
				// }, {
				// 	peoplo: '婴儿',
				// 	age: ''
				// }, {
				// 	peoplo: '床铺数',
				// 	age: ''
				// }],
				minNum: 0,
				maxNum: 100,
				priceRang: [{
					name: '￥0~100',
					id: '0'
				}, {
					name: '￥100~150',
					id: '1'
				}, {
					name: '￥150~200',
					id: '2'
				}, {
					name: '￥200~300',
					id: '3'
				}, {
					name: '￥300以上',
					id: '4'
				}],
				isRang: '0',
				activeTab: 0,
				tabCkindex: '',
				 
				subCategoryList: [],
				// new
				// 经纬度
				latitude: '', //经度
				longitude: '', //维度
				page: 1,
				limit: 10,
				total: '',
				dataPages: 0,
				inpTitle: '',
				ksjg: '', //开始价格
				jsjg: '', //结束价格
				ysjg: '', //以上价格
				ydTime: '', //预约酒店日期
				startTime: '',
				endTime: '',
				staTimevalue: '',
				endTimevalue: '',
				startWeek: '',
				endWeek: '',
				// 住离时间
				popupShow: false,
				defaultAllend: '',
				defaultAllstart: '',
				startTime1: '',
				endTime1: '',
				xzName: '',
				zcfwList: [], //政策服务
				bottomShowText: false,
				categoryOp: [{
						text: '500m',
						value: 0,
						xz: '500',
						selected:false,
					},
					{
						text: '1km',
						value: 1,
						xz: '1000',
						selected:false,
					},
					{
						text: '3km',
						value: 2,
						xz: '2000',
						selected:false,
					},
					{
						text: '5km',
						value: 3,
						xz: '2000',
						selected:false,
					},
					{
						text: '10km',
						value: 4,
						xz: '4000',
						selected:false,
					},
				],
			}
		},
		onLoad(op) {

			console.log("op1", op)
			this.longitude = op.longitude
			this.latitude = op.latitude
			this.ksjg = op.ksjg
			this.jsjg = op.jsjg
			this.minNum = op.ksjg
			this.maxNum = op.jsjg
			this.ysjg = op.ysjg
			this.ydTime = op.ydTime
			this.startTime = op.startTime
			this.endTime = op.endTime
			this.startTime1 = op.startTime1
			this.endTime1 = op.endTime1
			this.startWeek = op.startWeek
			this.endWeek = op.endWeek
			this.staTimevalue = op.staTimevalue
			this.endTimevalue = op.endTimevalue
			// this.defaultAllstart = op.defaultAllstart
			// this.defaultAllend = op.defaultAllend

			if (op.title == 'undefined') {
				this.inpTitle = ''
			} else {
				this.inpTitle = op.title
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			console.log("触底11", this.hoteldList.length, this.dataPages)
			if (this.page >= this.dataPages) {
				this.fui.toast("到底了")
				this.bottomShowText = true
				return false
			} else {
				this.page++
				this.getList()
			}
		},
		onPullDownRefresh() {
			console.log('开始');
			this.xzName = ''
			this.minNum = ''
			this.maxNum = ''
			this.page = 1
			this.hoteldList = []
			this.getList()
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);

		},
		methods: {
			getList() {
				//  
				this.$http.get(this.$httpApi.msList, {
					data: {
						page: this.page,
						limit: this.limit,
						title: this.inpTitle,
						qsjg: this.minNum,
						jsjg: this.maxNum,
						ysjg: this.ysjg,
						ydTime: this.ydTime,
						// longitude: this.longitude,
						// latitude: this.latitude,
						xz: this.xzName
					}
				}).then(res => {
					if (res.code == 0) {
						if (res.pages == 1) {
							this.hoteldList = res.page
						} else if (res.pages == 0) {
							this.hoteldList = []
						} else {
							this.hoteldList = this.hoteldList.concat(res.page)
						}
						console.log("list", this.hoteldList)
						this.total = res.total
						this.dataPages = res.pages
					}
				})

			},

			// 用户选择时间
			calendarChange(e) {
				this.staTimevalue = e.value[0]
				this.endTimevalue = e.value[1]
				// this.startTime = e.lunar[0].cMonth + '月' + e.lunar[0].cDay + '日'
				// this.endTime = e.lunar[1].cMonth + '月' + e.lunar[1].cDay + '日'
				// 搜索列表展示的时间
				this.startTime1 = e.lunar[0].cMonth + '-' + e.lunar[0].cDay
				this.endTime1 = e.lunar[1].cMonth + '-' + e.lunar[1].cDay
				this.startTime = e.lunar[0].cMonth + '月' + e.lunar[0].cDay + '日'
				this.endTime = e.lunar[1].cMonth + '月' + e.lunar[1].cDay + '日'
				// // 星期几
				this.startWeek = e.lunar[0].ncWeek
				this.endWeek = e.lunar[1].ncWeek
			},
			//调用此方法显示时间底部弹出层
			showTimePopup(type) {
				this.popupShow = true
			},
			closeTimePopup(type) {
				this.popupShow = false
				let arr = this.fui.getAllDate(this.staTimevalue, this.endTimevalue)
				this.ydTime = arr.join(',')
				this.getList()
			},
			// 经纬度距离
			distance: function(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
					Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
			closePopup() {
				this.show = false
			},
			pricePopup() {
				this.show = false
				this.getList()
			},
			onTabClick(e) {
				this.tabCkindex = e.index

				console.log('tabClick', e)
			},
			onChange(e) {
				const index = e.index
				console.log('change', e)
			},
			filterChange(e) {
				this.topModel = e.index;
				this.show = true;
				if (this.topModel == 1) {
					this.show = false;
					this.picFlag = !this.picFlag
					console.log("picFlag", this.picFlag)
				}
			},
			// 控制进度条
			//区间选择返回数据
			sectionChange(e) {
				console.log('evalue', e, this.minNum, this.maxNum)
			},
			getRang(val) {
				console.log("111", val.id)
				switch (val.id) {
					case '0':
						this.minNum = 0
						this.maxNum = 100
						this.isRang = '0'
						break;
					case '1':
						this.minNum = 100
						this.maxNum = 150
						this.isRang = '1'
						break;
					case '2':
						this.minNum = 150
						this.maxNum = 200
						this.isRang = '2'
						break;
					case '3':
						this.minNum = 200
						this.maxNum = 300
						this.isRang = '3'
						break;
					case '4':
						this.minNum = 300
						this.maxNum = 300
						this.isRang = '4'
						break;
				}
			},
			categoryChange(e) {
				console.log("change", e)
				this.categoryOp.forEach(val => {
					if (e.detail.value == val.value) {
						console.log("val", val)
						this.xzName = val.xz
					}
					console.log("xzName", this.xzName)
				})
				this.showAddress = false
				this.getList()
			},
			categoryMainClick(category) {
				this.subCategoryList = category.ar;
			},
			categorySubClick(category) {
				console.log('category', category)
			},
			gostayDetails(mId) {
				uni.navigateTo({
					url: "/pages/homeStayDetails/index?mId="+ mId + '&ydTime=' + this.ydTime + '&startTime1=' + this.startTime + '&endTime1=' + this.endTime
				})
			}
		},
		mounted() {
			this.subCategoryList = this.categoryList[0].ar;
		}

	}
</script>

<style lang="scss" scoped>
	.homestay {
		height: 100%;

		.hotelHeader {
			background-color: #FFFFFF;
			// height: 500rpx;

			.hearder-content {
				background-color: #F4F4F4;
				width: 686rpx;
				margin: 0 auto;
				display: flex;
				border-radius: 37rpx;
				padding: 6rpx 0;

				.header-left {
					width: 35%;
					// background-color: pink;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 32rpx;
					border-right: 1px solid #D8D8D8;

					.hleft {
						color: #35743D;
						font-size: 26rpx;

					}

					.hright {
						font-size: 24rpx;
						margin-right: 24rpx;

						.zhu {
							color: #B1B1B1;
							margin-right: 10rpx;
						}
					}
				}

				.header-right {
					width: 65%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 26rpx;
					margin-left: 24rpx;

					image {
						margin-right: 10rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.hearder-screen {}
		}

		.hotelContent {
			.hotel-details {
				background-color: #FFFFFF;
				// padding-top: 24rpx;
				margin-top: 18rpx;
				padding-bottom: 30rpx;
				border-radius: 16rpx;

				// .card-content{
				// 	margin-bottom: 100rpx;
				// }
				/deep/.fui-card__footer {
					border: none;
				}

				.fui-card__content {
					color: #1D1D1D;
					font-size: 30rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}

				.fui-card__details {
					color: #8E8E8E;
					font-size: 24rpx;
					margin-bottom: 28rpx;
				}

				.fui-card__price {
					margin-top: 24rpx;
					.card-pr1 {
						color: #D93C3C;
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 8rpx;
					}

					.card-pr2 {
						color: #B4B4B4;
						font-size: 20rpx;
						margin-right: 8rpx;
						text-decoration: line-through;
					}

					image {
						width: 128rpx;
						height: 34rpx;
					}
				}

				.stay-img {
					width: 100%;
				}
			}
		}

		.headTop {
			.fItems {
				width: 686rpx;
				margin: 0 auto;
				padding-bottom: 40rpx;

				.fItem0 {

					.fui-custom__wrap {
						// height: 100rpx;
						padding: 30rpx 0;

						.price-introduce {
							padding: 0 20rpx;
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;
							margin-top: 20rpx;

							.price-items {
								float: left;
								background: #F8F8F8;
								height: 32rpx;
								font-size: 22rpx;
								color: #B4B4B4;
								line-height: 32rpx;
								padding: 6rpx;
								margin: 8rpx 10rpx;
								// padding: 14rpx 20rpx;

							}

							.active-rang {
								border: 1px solid #35743D;
							}


							.active-rang {
								border: 1px solid #35743D;
							}

						}
					}

					.price-custom__wrap {
						.price-rang {
							display: flex;
							justify-content: space-between;
							padding: 20rpx 20rpx;
							color: #7E7E7E;
							font-size: 24rpx;
						}

						.progress-style {
							/deep/.fui-slider__wrap-outer {
								width: 90%;
								margin: 0 2%;
							}

						}

					}
				}

				.fItem1 {
					.fPeople {
						.people-list {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #EDEDED;
							height: 40rpx;
							padding: 24rpx 0;
							width: 94%;
							margin: 0 3%;
							color: #1D1D1D;

							.list-left {
								.people-age {
									font-size: 22rpx;
								}
							}

							.list-right {
								display: flex;
								justify-content: flex-end;
								align-items: center;

								.find-num {
									padding: 0 20rpx;
								}

								image {
									margin: 0 20rpx;
									width: 30rpx;
									height: 30rpx;

									&:last-child {
										margin-right: 0;
									}
								}

							}
						}

						.buttBtn {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;

							.button {
								width: 196rpx;
							}

							.button1 {
								width: 440rpx;
							}
						}
					}
				}

				.fItem3 {
					page {
						background: #fff;
						font-weight: normal;
					}

					.fui-vtabs-content__item {
						width: 100%;
						box-sizing: border-box;
						overflow: hidden;
					}

					.fui-img {
						width: 100%;
						height: 268rpx;
						display: block;
						margin-top: 24rpx;
					}

					.fui-content--box {
						width: 100%;
						padding: 30rpx 24rpx 40rpx;
						box-sizing: border-box;
					}

					.fui-title {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
					}

					.fui-descr {
						display: block;
						font-size: 24rpx;
						padding-top: 24rpx;
					}

				}
			}
		}
	}
	.timeHeader {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		position: relative;
	
		image {
			position: absolute;
			right: 45rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
	/* 自定义内容区样式需自行控制 */
	.fui-custom__wrap {
		// width: 100%;
		// height: 520rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}
</style>
